import React, { useRef } from 'react';
import { Modal, Form, Input } from 'antd';
import { compileStuItemAPI } from '@/server/category';

export default function dialogBox({ isShow, setShow, item }) {
  // 获取表单实例
  const form = useRef();
  // 点击确定回调
  const handleOk = () => {
    form.current.submit();
    console.log(item);
    // setShow(false);
  };
  // 关闭弹出层
  const handleCancel = () => {
    form.current.resetFields();
    setShow(false);
  };
  // 表单校验规则
  const rules = {
    name: [
      {
        required: true,
        message: '请输入名字！',
      },
      {
        pattern: /^[\u4e00-\u9fa5]{2,5}$/,
        message: '请输入2-5个汉字！',
      },
    ],
    score: [
      {
        required: true,
        message: '请输入分数！',
      },
      {
        pattern: /^([0-9]{1,2}|100)$/,
        message: '请输入0~100的分数',
      },
    ],
    created_at: [
      {
        required: true,
        message: '请输入生日！',
      },
    ],
    province: [
      {
        required: true,
        message: '请输入省区！',
      },
    ],
    city: [
      {
        required: true,
        message: '请输入市区！',
      },
    ],
  };
  // 校验成功回调
  const onFinish = (values) => {
    // console.log(item);
    // console.log('Success:', values);
    compileStuItemAPI({ ...values, id: item.id });
  };
  return (
    <Modal
      title="编辑数据"
      open={isShow}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form
        ref={form}
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 400,
        }}
        initialValues={item}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item label="姓名" name="name" rules={rules.name}>
          <Input />
        </Form.Item>
        <Form.Item label="分数" name="score" rules={rules.score}>
          <Input />
        </Form.Item>
        <Form.Item label="生日" name="created_at" rules={rules.created_at}>
          <Input />
        </Form.Item>
        <Form.Item label="省区" name="province" rules={rules.province}>
          <Input />
        </Form.Item>
        <Form.Item label="市区" name="city" rules={rules.city}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}
